<template>
  <div class="login-container">
    <div class="login-wrapper">
      <!-- 左侧品牌区域 -->
      <div class="login-brand">
        <div class="brand-content">
          <div class="logo">
            <span class="logo-text">统一业务平台</span>
            <span class="logo-version">v0.0.0</span>
          </div>
          <h2>欢迎回来</h2>
          <p>基于乾坤框架的微前端管理平台</p>
          <div class="brand-image">
            <svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M50 150L150 50L250 150" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="150" cy="100" r="30" fill="white" opacity="0.3"/>
              <rect x="130" y="170" width="40" height="30" fill="white" opacity="0.2"/>
            </svg>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录表单 -->
      <div class="login-form-wrapper">
        <div class="login-form">
          <h1 class="form-title">账号登录</h1>
          
          <form @submit.prevent="handleLogin">
            <div class="form-group">
              <label for="username">用户名</label>
              <div class="input-wrapper">
                <i class="icon-user"></i>
                <input
                  id="username"
                  v-model="formData.username"
                  type="text"
                  placeholder="请输入用户名"
                  required
                  autocomplete="username"
                />
              </div>
            </div>
            
            <div class="form-group">
              <label for="password">密码</label>
              <div class="input-wrapper">
                <i class="icon-lock"></i>
                <input
                  id="password"
                  v-model="formData.password"
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="请输入密码"
                  required
                  autocomplete="current-password"
                />
                <button
                  type="button"
                  class="toggle-password"
                  @click="togglePasswordVisibility"
                >
                  {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                </button>
              </div>
            </div>
            
            <div class="form-options">
              <label class="checkbox-wrapper">
                <input type="checkbox" v-model="formData.remember" />
                <span class="checkmark"></span>
                记住我
              </label>
              <a href="#" class="forgot-password">忘记密码？</a>
            </div>
            
            <button type="submit" class="login-button" :disabled="isLoading">
              {{ isLoading ? '登录中...' : '登录' }}
            </button>
          </form>
          
          <div class="login-footer">
            <p>登录即表示您同意我们的<a href="#">服务条款</a>和<a href="#">隐私政策</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

// 表单数据
const formData = ref({
  username: '',
  password: '',
  remember: false
})

// 状态控制
const showPassword = ref(false)
const isLoading = ref(false)

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 处理登录
const handleLogin = async () => {
  try {
    isLoading.value = true
    
    // 这里应该是实际的登录API调用
    // 示例中使用模拟数据
    console.log('登录信息:', formData.value)
    
    // 模拟网络请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 假设登录成功，存储token等信息
    localStorage.setItem('user', JSON.stringify({ username: formData.value.username }))
    
    // 跳转到首页
    router.push('/')
  } catch (error) {
    console.error('登录失败:', error)
    alert('登录失败，请检查用户名和密码')
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
/* 基础样式 */
.login-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px;
  height: 80vh;
  max-height: 600px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  background-color: white;
}

/* 左侧品牌区域样式 */
.login-brand {
  flex: 1;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.brand-content {
  text-align: center;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.logo-version {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.brand-content h2 {
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 700;
}

.brand-content p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

.brand-image {
  opacity: 0.9;
}

/* 右侧表单区域样式 */
.login-form-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-form {
  width: 100%;
  max-width: 400px;
}

.form-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 700;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 0 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #3498db;
  background-color: white;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
}

.input-wrapper i {
  color: #999;
  margin-right: 12px;
  font-size: 18px;
}

.icon-user::before {
  content: '👤';
}

.icon-lock::before {
  content: '🔒';
}

.input-wrapper input {
  flex: 1;
  height: 50px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  color: #333;
}

.input-wrapper input::placeholder {
  color: #999;
}

.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 18px;
  color: #999;
  transition: color 0.3s ease;
}

.toggle-password:hover {
  color: #3498db;
}

/* 表单选项样式 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-size: 14px;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #666;
}

.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-right: 8px;
  transition: all 0.3s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark {
  background-color: #3498db;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.forgot-password {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* 登录按钮样式 */
.login-button {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
}

.login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 登录页脚样式 */
.login-footer {
  text-align: center;
  font-size: 12px;
  color: #999;
}

.login-footer a {
  color: #3498db;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
    height: auto;
    max-height: none;
    margin: 20px;
  }
  
  .login-brand {
    padding: 30px;
    order: 2;
  }
  
  .login-form-wrapper {
    padding: 30px;
    order: 1;
  }
  
  .form-title {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .input-wrapper input {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 20px;
  }
  
  .login-wrapper {
    margin: 0;
    border-radius: 16px;
  }
  
  .login-brand,
  .login-form-wrapper {
    padding: 20px;
  }
  
  .brand-content h2 {
    font-size: 24px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .login-button {
    height: 45px;
  }
}
</style>